<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>ILP Purchases</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ng-container *ngIf="(gameService.player$ | async) as player">
    <ion-row>
      <ion-col size-xs="12" offset-xs="0" size-md="8" offset-md="2" class="ion-padding">

        <ion-card>
          <ion-card-header>
            <ion-card-title>Buy ILP!</ion-card-title>
            <ion-card-subtitle>Please note, this should not be your primary means of gaining ILP. This feature is here to provide a way to support IdleLands with a one-off transaction.</ion-card-subtitle>
          </ion-card-header>

          <ion-card-content>
            <ion-list>
              <ion-item *ngFor="let item of allItems">
                <ion-label>
                  <h3>{{ item.name }}</h3>
                  <p>{{ item.desc }}</p>
                </ion-label>

                <ion-button slot="end" (click)="startPayment(item)">Buy</ion-button>
              </ion-item>
            </ion-list>
          </ion-card-content>
        </ion-card>
        
        <ion-card *ngIf="player.$premiumData">
          <ion-card-header>
            <ion-card-subtitle>You have {{ player.$premiumData.ilp | number }} ILP</ion-card-subtitle>
            <ion-card-title>
              Festivals
            </ion-card-title>
          </ion-card-header>

          <ion-card-content>
            <ion-list>
              <ion-item *ngFor="let festival of festivals">
                <ion-label class="ion-text-wrap">
                  <h3>{{ festival.name }}</h3>
                  <p>{{ festival.desc }}</p>
                </ion-label>

                <ion-button slot="end" 
                            (click)="buyFestival(festival)" 
                            [disabled]="player.$premiumData.ilp < festival.cost * (festival.duration / 24)">
                            Buy ({{ festival.cost * (festival.duration / 24) | number }} ILP)
                </ion-button>
              </ion-item>
            </ion-list>
          </ion-card-content>
        </ion-card>
        
        <ion-card *ngIf="player.$premiumData">
          <ion-card-header>
            <ion-card-subtitle>You have {{ player.$premiumData.ilp | number }} ILP</ion-card-subtitle>
            <ion-card-title>
              Premium Upgrades
            </ion-card-title>
          </ion-card-header>

          <ion-card-content>
            <ion-list>
              <ion-item *ngFor="let upgrade of upgrades">
                <ion-label class="ion-text-wrap">
                  <h3>{{ upgrade.name }}</h3>
                  <p>{{ upgrade.desc }}</p>
                  <p>
                    Your next upgrade costs {{ upgradeCost(upgrade.upgrade, player.$premiumData.upgradeLevels[upgrade.upgrade]) | number }} ILP. 
                    Total upgrades: {{ (player.$premiumData.upgradeLevels[upgrade.upgrade] || 0) | number }}.
                  </p>
                </ion-label>

                <ion-button slot="end" 
                            (click)="buyUpgrade(upgrade.upgrade)" 
                            [disabled]="player.$premiumData.ilp < upgradeCost(upgrade.upgrade, player.$premiumData.upgradeLevels[upgrade.upgrade])">Buy</ion-button>
              </ion-item>
            </ion-list>
          </ion-card-content>
        </ion-card>

        <ion-card *ngIf="player.$premiumData">
          <ion-card-header>
            <ion-card-subtitle>You have {{ player.$premiumData.ilp | number }} ILP</ion-card-subtitle>
            <ion-card-title>
              Other Purchases
            </ion-card-title>
          </ion-card-header>

          <ion-card-content>
            <ion-list>
              <ion-item *ngFor="let purch of otherILPPurchases">
                <ion-label class="ion-text-wrap">
                  <h3>{{ purch.name }}</h3>
                  <p>{{ purch.desc }}</p>
                </ion-label>

                <ion-button slot="end" 
                            (click)="buyOther(purch)" 
                            [disabled]="player.$premiumData.ilp < purch.cost">
                            Buy ({{ purch.cost | number }} ILP)
                </ion-button>
              </ion-item>
            </ion-list>
          </ion-card-content>
        </ion-card>

      </ion-col>
    </ion-row>
  </ng-container>
</ion-content>
